<template>
  <header class="head">
        <h2>社区防疫管理系统-beta</h2>
      <div class="infos" v-if="userinfo">
            <p>欢迎你：{{userinfo.username}}</p>
            <p>
                <el-tag type="success" effect="dark">{{userinfo.roleid | rolename}}</el-tag>
            </p>
            <p>
                <el-button @click="logout" type="info" icon="el-icon-switch-button" circle></el-button>
            </p>
      </div>
  </header>
</template>

<script>
export default {
    props:['userinfo'],
    methods:{
        logout(){
             this.$confirm('你确定要退出登录吗, 是否继续?', '退出提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    sessionStorage.removeItem("token");  // token 判断是否登录的标志
                    this.$router.push({name:"login"})
                }).catch(() => {

                });
        }
    }
}
</script>

<style lang="scss" scoped>
    .head{
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 60px;
        align-items: center;
        h2{
            color: #fff;
            font-size: 24px; 
        }
        .infos{
            display: flex;
            align-items: center;
            p{
                margin: 0 8px;
                cursor: pointer;
            }
        }
    }

   
</style>